<template>
  <div>
    <Row :gutter="10">
      <Col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="8"
        v-for="(item,index) in trendData"
        :key="item.title+index"
      >
        <Jdd-TopTrend
          v-model="trendData[index]"
          :countUp="'trend'+index"
          style="margin-top: 14px;height:120px;"
        ></Jdd-TopTrend>
      </Col>
    </Row>
    <Row :gutter="15">
      <Col :xs="24" :sm="24" :md="18" :lg="18" style="margin-top:15px;">
        <Card :bordered="false">
          <p slot="title">
            <Jdd-Icon type="icon-appAll" :size="18" />
            <span style="margin-left:15px;">总应用(收敛前)</span>
          </p>
          <Jdd-Charts
            :title="'总应用(收敛前)'"
            :type="'line'"
            :interval="0"
            :url="'/analysis/chart'"
            :refurbishMode="'add'"
            :width="'100%'"
            :height="'200px'"
            :autoLoad="true"
          ></Jdd-Charts>
        </Card>
      </Col>
      <Col :xs="24" :sm="24" :md="6" :lg="6" style="margin-top:15px;">
        <Card :bordered="false">
          <p slot="title">
            <Jdd-Icon type="icon-appAll" :size="18" />
            <span style="margin-left:15px;">当前活跃度</span>
          </p>
          <Jdd-Charts
            :type="'pie'"
            :interval="0"
            :url="'/analysis/piechart'"
            :config="pieCharts"
            :height="'200px'"
          ></Jdd-Charts>
        </Card>
      </Col>
    </Row>
    <Row :gutter="15">
      <Col :xs="24" :sm="24" :md="18" :lg="18" style="margin-top:15px;">
        <Card :bordered="false">
          <p slot="title">
            <Jdd-Icon type="icon-appAll" :size="18" />
            <span style="margin-left:15px;">柱状图</span>
          </p>
          <Jdd-Charts
            :title="'柱状图'"
            ref="myCharts"
            type="bar"
            url="/analysis/analysisChart"
            :interval="0"
            :refurbishMode="'cover'"
            :width="'100%'"
            :height="'200px'"
            :autoLoad="true"
          ></Jdd-Charts>
        </Card>
      </Col>
      <Col :xs="24" :sm="24" :md="6" :lg="6" style="margin-top:15px;">
        <Card :bordered="false" style="text-align:center;height:318px;">
          <p slot="title">
            <Jdd-Icon type="icon-appAll" :size="18" />
            <span style="margin-left:15px;">本月目标</span>
          </p>
          <Jdd-Circle v-model="circleData[0]" :size="200" style="text-align:center;"></Jdd-Circle>
        </Card>
      </Col>
    </Row>
    <Tabs value="name1" type="card" style="margin-top:15px;">
      <TabPane label="Tab1" name="name1">
        <Jdd-Charts
          :title="'线形图'"
          ref="myCharts"
          type="line"
          url="/analysis/analysisLineChart"
          :interval="0"
          :refurbishMode="'cover'"
          :width="'100%'"
          :height="'200px'"
          :autoLoad="true"
        ></Jdd-Charts>
      </TabPane>
      <TabPane label="Tab2" name="name2">标签二的内容</TabPane>
      <TabPane label="Tab3" name="name3">标签三的内容</TabPane>
    </Tabs>
  </div>
</template>

<script>
export default {
  name: 'analysisHome',
  data () {
    return {
      trendData: [
        {
          title: '今日活跃用户',
          color: 'rgb(45, 140, 240)',
          data: [
            { tit: 'today', val: 122334, trend: 'up', unit: '' },
            { tit: '日', val: '23.1%', trend: 'down', unit: '%' },
            { tit: '周', val: '7.76%', trend: 'up', unit: '%' },
            { tit: '月', val: '2.12%', trend: 'down', unit: '%' }
          ]
        },

        {
          title: '今日活跃账号',
          color: 'rgb(68,182,69)',
          data: [
            { tit: 'today', val: 123323234545, trend: 'up', unit: '' },
            { tit: '日', val: '2.3%', trend: 'down', unit: '%' },
            { tit: '周', val: '3.12%', trend: 'up', unit: '%' },
            { tit: '月', val: '1.23%', trend: 'down', unit: '%' }
          ]
        },
        {
          title: '今日启动次数',
          color: 'rgb(18, 169, 181)',
          data: [
            { tit: 'today', val: 12456545, trend: 'up', unit: '' },
            { tit: '日', val: '3.2%', trend: 'down', unit: '%' },
            { tit: '周', val: '4.32%', trend: 'up', unit: '%' },
            { tit: '月', val: '3.21%', trend: 'down', unit: '%' }
          ]
        }
      ],
      barConfig: {
        图例A: { type: 'bar', unit: '%', color: '#C71212' },
        图例B: { type: 'bar', unit: '%', color: '#16F534' },
        图例c: { type: 'bar', unit: '%', color: '#B9B514' }
      },
      pieCharts: {
        跳转率: { color: '#5EB7F3' },
        留存率: { color: '#16F534' },
        活跃率: { color: '#C71212' }
      },
      circleData: [{ text: '完成率', percent: 5, color: '#16F534' }]
    }
  }
}
</script>
